<template>
  <div class="">
    <div class="header">
      <div class="logo">
        <img src="../assets/img/home-logo.png" alt="" />
        <span>大数据风控系统</span>
      </div>
      <div class="tab">
        <span>运单分析台</span>
      </div>
    </div>
    <div class="main">
      <form-content @getFormData="getFormData"></form-content>
      <div class="result">
        <formResult
          ref="sfTable"
          :data="loadTableData"
          :columns="resultFormList"
          :isDefaultLoad="false"
          :response="{ list: 'details', total: 'hitNum' }"
          :showToolbar="true"
          :showOverflowTooltip="true"
          max-height="650px"
          @row-dblclick="showSurface"
        >
          <template #left-toolbar>
            <div class="result-table-title">
              运单总数（
              {{ ($refs.sfTable && $refs.sfTable.tableTotal) || 0 }}
              ）条，仅支持前10000条数据的显示
            </div>
          </template>
          <template #right-toolbar-before>
            <div
              class="toolbar-item"
              v-if="$refs.sfTable && $refs.sfTable.tableTotal"
            >
              <el-tooltip content="导出" placement="top">
                <i class="el-icon-download" @click="exportTable" />
              </el-tooltip>
            </div>
          </template>
        </formResult>
      </div>
      <el-dialog
        title="电子面单详情"
        :visible.sync="isShowSurface"
        width="90%"
        center
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <div class="surface surface-header">
              <div class="surface-title">
                <h2 class="h2">面单信息</h2>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="7"
                    ><div class="item-wrap">
                      <span class="item-label">托寄物名称：</span
                      ><span class="item-value">{{
                        showFaceList.expressGoodsName
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="7"
                    ><div class="item-wrap">
                      <span class="item-label">物品类型：</span
                      ><span class="item-value">{{
                        showFaceList.expressGoodsType
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="7"
                    ><div class="item-wrap">
                      <span class="item-label">物品重量（单位kg）：</span
                      ><span class="item-value">{{
                        showFaceList.expressGoodsWeight
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="7"
                    ><div class="item-wrap">
                      <span class="item-label">揽件时间：</span
                      ><span class="item-value">{{
                        showFaceList.shipExpressTime | datetime
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="14"
                    ><div class="item-wrap">
                      <span class="item-label">派件时间：</span
                      ><span class="item-value">{{
                        showFaceList.dispatchExpressTime | datetime
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="21"
                    ><div class="item-wrap">
                      <span class="item-label">面单url：</span
                      ><span class="item-value">{{
                        showFaceList.expressInvoicePhoto
                      }}</span>
                    </div></el-col
                  >
                  <el-col :span="21"
                    ><div class="item-wrap">
                      <span class="item-label">面单开箱验视照片url：</span
                      ><span class="item-value">{{
                        showFaceList.expressBoxPhoto
                      }}</span>
                    </div></el-col
                  >
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="qr-code">
            <div class="top">{{ showFaceList.companyCode }}</div>
            <div class="img">
              <img :src="QrCodeUrl" alt="" />
            </div>
            <div class="bottom">{{ showFaceList.expressNo }}</div>
          </el-col>
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">寄件人信息</h2>
                <el-button type="danger">
                  {{ showFaceList.senderAddressCity }}
                </el-button>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span>姓名：{{ showFaceList.senderUsername }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>手机号码：{{ showFaceList.senderPhone }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span>区号：{{ showFaceList.senderCityCode }}</span>
                  </el-col>
                  <el-col :span="12"
                    ><span>所属民族：{{ showFaceList.senderNation }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span>性别：{{ showFaceList.senderSex }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>邮编：{{ showFaceList.senderPostalCode }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span
                      >证件类型：{{ showFaceList.senderIdcardType }}</span
                    ></el-col
                  >
                  <el-col :span="12">
                    <span>证件号码：{{ showFaceList.senderIdcardNo }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><span
                      >省份：{{ showFaceList.senderAddressProvince }}</span
                    ></el-col
                  ><el-col :span="8"
                    ><span
                      >城市：{{ showFaceList.senderAddressCity }}</span
                    ></el-col
                  ><el-col :span="8"
                    ><span
                      >区县：{{ showFaceList.senderAddressCounty }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span>地址：{{ showFaceList.senderAddress }}</span></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">收件人信息</h2>
                <el-button type="primary">
                  {{ showFaceList.receiverAddressCity }}
                </el-button>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span>姓名：{{ showFaceList.receiverUsername }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>手机号码：{{ showFaceList.receiverPhone }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span>区号：{{ showFaceList.receiverCityCode }}</span>
                  </el-col>
                  <el-col :span="12"
                    ><span>所属民族：{{ showFaceList.receiverNation }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span>性别：{{ showFaceList.receiverSex }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>邮编：{{ showFaceList.receiverPostalCode }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <span
                      >证件类型：{{ showFaceList.receiverIdcardType }}</span
                    ></el-col
                  >
                  <el-col :span="12">
                    <span>证件号码：{{ showFaceList.receiverIdcardNo }}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><span
                      >省份：{{ showFaceList.receiverAddressProvince }}</span
                    ></el-col
                  ><el-col :span="8"
                    ><span
                      >城市：{{ showFaceList.receiverAddressCity }}</span
                    ></el-col
                  ><el-col :span="8"
                    ><span
                      >区县：{{ showFaceList.receiverAddressCounty }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >地址：{{ showFaceList.receiverAddress }}</span
                    ></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">寄件方网点信息</h2>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位编码：{{ showFaceList.shipPlaceCode }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >单位名称：{{ showFaceList.shipPlaceName }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位地址：{{ showFaceList.shipPlaceAddress }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <span
                      >单位社会信用统一代码：{{
                        showFaceList.shipPlaceBusinessLicense
                      }}</span
                    >
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位法人姓名：{{
                        showFaceList.shipLegalPersonName
                      }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >单位法人手机号：{{
                        showFaceList.shipLegalPersonPhone
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位法人身份证号：{{
                        showFaceList.shipLegalPersonIdcardNo
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位负责人姓名：{{ showFaceList.shipPlaceManager }}</span
                    ></el-col
                  >
                  <el-col :span="12"
                    ><span
                      >单位负责人手机号：{{
                        showFaceList.shipPlaceManagerPhone
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位负责人身份证号：{{
                        showFaceList.shipPlaceManagerIdccardNo
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位所属辖区编码：{{
                        showFaceList.shipPlaceAreaCode
                      }}</span
                    ></el-col
                  >
                  <el-col :span="12"
                    ><span
                      >单位所属辖区名称：{{
                        showFaceList.shipPlaceAreaName
                      }}</span
                    ></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">收件方网点信息</h2>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位编码：{{ showFaceList.dispatchPlaceCode }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >单位名称：{{ showFaceList.dispatchPlaceName }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位地址：{{ showFaceList.dispatchPlaceAddress }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <span
                      >单位社会信用统一代码：{{
                        showFaceList.dispatchPlaceBusinessLicense
                      }}</span
                    >
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位法人姓名：{{
                        showFaceList.dispatchLegalPersonName
                      }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >单位法人手机号：{{
                        showFaceList.dispatchLegalPersonPhone
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位法人身份证号：{{
                        showFaceList.dispatchLegalPersonIdcardNo
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位负责人姓名：{{
                        showFaceList.dispatchPlaceManager
                      }}</span
                    ></el-col
                  >
                  <el-col :span="12"
                    ><span
                      >单位负责人手机号：{{
                        showFaceList.dispatchPlaceManagerPhone
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >单位负责人身份证号：{{
                        showFaceList.dispatchPlaceManagerIdccardNo
                      }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >单位所属辖区编码：{{
                        showFaceList.dispatchPlaceAreaCode
                      }}</span
                    ></el-col
                  >
                  <el-col :span="12"
                    ><span
                      >单位所属辖区名称：{{
                        showFaceList.dispatchPlaceAreaName
                      }}</span
                    ></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">寄件方快递员信息</h2>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >身份证号：{{ showFaceList.shipStaffIdNumber }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >姓名：{{ showFaceList.shipStaffUsername }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span>工号：{{ showFaceList.shipStaffNo }}</span></el-col
                  ><el-col :span="12"
                    ><span
                      >手机号：{{ showFaceList.shipStaffPhone }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >所属民族：{{ showFaceList.shipStaffNation }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >性别：{{ showFaceList.shipStaffGender }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >证件类型：{{ showFaceList.shipStaffIdcardType }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >证件号码：{{ showFaceList.shipStaffIdcardNo }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >居住地址：{{ showFaceList.shipStaffAddress }}</span
                    ></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="surface">
              <div class="surface-title">
                <h2 class="h2">收件方快递员信息</h2>
              </div>
              <div class="surface-content">
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >身份证号：{{ showFaceList.dispatchStaffIdNumber }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >姓名：{{ showFaceList.dispatchStaffUsername }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >工号：{{ showFaceList.dispatchStaffNo }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >手机号：{{ showFaceList.dispatchStaffPhone }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >所属民族：{{ showFaceList.dispatchStaffNation }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >性别：{{ showFaceList.dispatchStaffGender }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><span
                      >证件类型：{{
                        showFaceList.dispatchStaffIdcardType
                      }}</span
                    ></el-col
                  ><el-col :span="12"
                    ><span
                      >证件号码：{{ showFaceList.dispatchStaffIdcardNo }}</span
                    ></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24"
                    ><span
                      >居住地址：{{ showFaceList.dispatchStaffAddress }}</span
                    ></el-col
                  >
                </el-row>
              </div>
            </div></el-col
          >
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import extend from "extend";
import { ruleData } from "../assets/js/ruleData";
import { resultFormList } from "../assets/js/config";
import { AccountApi } from "../api/account";
import { downloadBlobFile } from "../utils";
import formResult from "../components/vueTable.vue";
import formContent from "./FormContent.vue";
export default {
  props: {},
  name: "Home",
  components: {
    formResult,
    formContent,
  },
  data() {
    return {
      resultFormList,
      ruleData: ruleData,
      courier: [],
      isShowSurface: false,
      tableData: [],
      showFaceList: {},
      QrCodeUrl: "",
      formData: {},
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    loadTableData(parameter) {
      let queryParams = extend(true, parameter, this.formData);
      return AccountApi.select(queryParams);
    },
    getFormData(formData, flag) {
      this.formData = formData;
      this.$refs.sfTable.refresh(flag);
    },
    showSurface(obj) {
      this.showFaceList = obj;
      let params = {
        expressNo: obj.expressNo,
      };
      AccountApi.getQRCode(params).then((res) => {
        this.QrCodeUrl = res;
      });
      this.isShowSurface = true;
    },
    exportTable() {
      AccountApi.getExport(this.formData).then((res) => {
        downloadBlobFile(res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
}
.header {
  width: 100%;
  height: 70px;
  color: #fff;
  background-color: #222336;
  display: flex;
  .logo {
    width: 250px;
    font-size: 20px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    display: inline-block;
    img {
      width: 50px;
    }
  }
  .tab {
    font-size: 30px;
    line-height: 70px;
    width: calc(100% - 250px);
    display: inline-block;
    text-align: center;
    padding-right: 250px;
  }
}
.main {
  padding: 20px 80px;
  margin: 0 auto;
  font-size: 14px;
  background-color: #1c1d2f;
  color: #fff;
  .result {
    background-color: #222336;
    position: relative;
    border-radius: 5px;
    margin: 10px 0;
    padding: 0 10px;
    .b-submit {
      position: absolute;
      right: 25px;
      bottom: 0;
      width: 60px;
      height: 30px;
      line-height: 30px;
    }
  }
}
.arrow {
  display: inline-block;
  width: 29px;
  height: 6px;
  background: url("../assets/img/icon-arrow.png");
  background-size: 100% 100%;
  margin: 0 15px;
}
.excel {
  display: flex;
  .excel-button {
    margin: 0 5px;
  }
}
.col {
  min-width: 150px;
}
.surface {
  color: #ddd;
  background-color: #242b3c;
  margin-bottom: 20px;
  min-height: 260px;
  .surface-title {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
    color: #3f8ad8;
    padding: 20px;
  }
  .surface-content {
    font-size: 14px;
    padding: 20px;
    .el-col {
      height: 25px;
      line-height: 25px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.qr-code {
  text-align: center;
  font-size: 16px;
  color: #ddd;
  .img {
    width: 200px;
    margin: 10px auto;
    img {
      width: 100%;
    }
  }
}
</style>